import React from 'react';
import { List } from 'react-virtualized';






class MyReactList extends React.Component {
  state = {
    list: [
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn'
      // And so on...
    ]
  }
  rowRenderer = ({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
  }) => {
    return (
      <div key={key} style={style}>
        {index} {this.state.list[index]}
      </div>
    );
  }

  render() {

    return <List
      width={300}
      height={300}
      rowCount={this.state.list.length}
      rowHeight={20}
      rowRenderer={this.rowRenderer}
    />
  }
}


export default MyReactList